<script>
  import ElDropdown from 'element-ui/packages/dropdown';

  export default {
    extends: ElDropdown,

    methods: {
      handleContextmenu (e) {
        e.preventDefault();
        this.handleClick();
      },
      initEvent() {
        let { trigger, show, hide, handleClick, handleContextmenu, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;
        this.triggerElm = splitButton
          ? this.$refs.trigger.$el
          : this.$slots.default[0].elm;

        let dropdownElm = this.dropdownElm;

        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
        // 控制自定义元素的样式
        if (!splitButton) {
          this.triggerElm.addEventListener('focus', () => {
            this.focusing = true;
          });
          this.triggerElm.addEventListener('blur', () => {
            this.focusing = false;
          });
          this.triggerElm.addEventListener('click', () => {
            this.focusing = false;
          });
          this.triggerElm.addEventListener('contextmenu', () => {
            this.focusing = false;
          });
        }
        if (trigger === 'hover') {
          this.triggerElm.addEventListener('mouseenter', show);
          this.triggerElm.addEventListener('mouseleave', hide);
          dropdownElm.addEventListener('mouseenter', show);
          dropdownElm.addEventListener('mouseleave', hide);
        } else if (trigger === 'click') {
          this.triggerElm.addEventListener('click', handleClick);
        } else if (trigger === 'contextmenu') {
          this.triggerElm.addEventListener('contextmenu', handleContextmenu);
        }
      },
    }
  }
</script>
